﻿<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>event实现拖拽效果</title>
<!--autor: carriehuang | QQ:453555909 | 转载需注明原处-->
<head>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
     	.box{
     		width: 100px;
     		height: 100px;
     		background-color: blue;
     		position: absolute;
     		left: 0;
     		top: 0;
     	}
        
    </style>
</head>
<body>
<div class="box" id="j_box"></div>
<script type="text/javascript">
/*
 
 * Event对象参数 clientX ：鼠标点击的位置到可视区的X坐标。
 * onmousemove: 当鼠标在一个元素上面移动的触发，触发频率不是像素；而是间隔时间，在一个指定的时间内，如果鼠标的位置和上一个的位置对比发生变化，那么就会触发一次。
 * */
    window.onload=function(){
        var oBox = document.getElementById("j_box");

		    document.onmousemove = function(ev){
		    	var ev = ev || event;
		    	var sTop = document.documentElement.scrollTop || document.body.scrollTop;
		    	var sLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
		    	oBox.style.left= ev.clientX+sLeft+"px";
		    	oBox.style.top= ev.clientY+sTop+"px";
		    };
		    
		   
		    
		    
		  
		}
</script>
</body>

</html>
